<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>CSS3 多列属性示例</title>  
    <style>  
        .multi-column {  
            column-count: 3; /* 将内容分成3列 */  
            column-gap: 20px; /* 列之间的间距 */  
            column-rule: 1px solid #000; /* 列之间的边框 */  
            width: 80%; /* 设置容器的宽度 */  
            margin: 0 auto; /* 居中对齐 */  
            font-size: 18px; /* 设置字体大小 */  
            line-height: 1.5; /* 设置行高 */  
        }  
  
        .multi-column p {  
            margin: 0 0 1em; /* 设置段落之间的间距 */  
        }  
    </style>  
</head>  
<body>  
    <div class="multi-column">  
        <h1>CSS3 多列属性示例</h1>  
        <p>这是一个演示 CSS3 多列属性的段落。你可以看到，内容被自动分成了三列，并且列之间有间距和边框。</p>  
        <p>多列布局非常适合用于展示文章、新闻、产品列表等内容，它可以提高页面的可读性和美观度。</p>  
        <p>你可以通过调整 column-count、column-gap 和 column-rule 属性来自定义多列布局的外观。</p>  
        <p>此外，你还可以使用 column-span 属性来指定某个元素应该跨越所有列。不过，在这个示例中我们并没有使用它。</p>  
        <p>希望这个示例能帮助你更好地理解 CSS3 的多列属性！</p> 
        <p>你可以通过调整 column-count、column-gap 和 column-rule 属性来自定义多列布局的外观。</p>  
        <p>此外，你还可以使用 column-span 属性来指定某个元素应该跨越所有列。不过，在这个示例中我们并没有使用它。</p>  
        <p>希望这个示例能帮助你更好地理解 CSS3 的多列属性！</p>  
        <p>你可以通过调整 column-count、column-gap 和 column-rule 属性来自定义多列布局的外观。</p>  
        <p>此外，你还可以使用 column-span 属性来指定某个元素应该跨越所有列。不过，在这个示例中我们并没有使用它。</p>  
        <p>希望这个示例能帮助你更好地理解 CSS3 的多列属性！</p>   
    </div>  
</body>  
</html>